<template>
  <div class="home" @scroll="homeScroll">
    <div class="carousel">
      <Carousel :list="imgList" :duration="10"></Carousel>
    </div>
    <div id="nav" :class="'navbar '+navFixed">
      <Navbar :mune-list="menuList"></Navbar>
    </div>
    <div class="section" :style="'margin-top: '+sectionMarTop_current+'px;'">
      <video-list :video-list="videoList"></video-list>
      <audio-list class="mar-tp" :audio-list="audioList"></audio-list>
      <video-list class="mar-tp" :video-list="videoList"></video-list>
      <video-list class="mar-tp" :video-list="videoList"></video-list>
    </div>
  </div>
</template>

<script>
import Carousel from "./main/assistComponents/carousel.vue";
import Navbar from "./main/assistComponents/navbar.vue";
import VideoList from "./main/videoList.vue";
import AudioList from "./main/audioList.vue";

export default {
  name: "main",
  data() {
    return {
      imgList: [
        { imgUrl: "img/c1.jpg", url: "" },
        { imgUrl: "img/c2.jpg", url: "" },
        { imgUrl: "img/c3.jpg", url: "" },
        { imgUrl: "img/c4.jpg", url: "" }
      ],
      menuList: [
        { name: "首页", url: "" },
        { name: "视频", url: "" },
        { name: "音乐", url: "" },
        { name: "文章", url: "" },
        { name: "游戏", url: "" },
        { name: "动画", url: "" },
        { name: "排行榜", url: "" }
      ],
      videoList: [
        {
          name: "【独家】久违的西安小吃组合！",
          imgUrl: "img/v1.jpg",
          author: "子木",
          hot: "201",
          playUrl: "./assets/video.mp4",
          duration: "2:00"
        },
        {
          name: "诸葛亮的红色蜀国",
          imgUrl: "img/v2.jpg",
          author: "思慕",
          hot: "200",
          url: "",
          duration: "3:21"
        },
        {
          name: "【我妻由乃同人文】我和熟悉的转校生",
          imgUrl: "img/v3.jpg",
          author: "叫我君君吧",
          hot: "2000",
          url: "",
          duration: "4:05"
        },
        {
          name: "【漫画】誉的后宫漂流记 #82",
          imgUrl: "img/v4.jpg",
          author: "一只憨憨啊",
          hot: "20000",
          url: "",
          duration: "1:55"
        },
        {
          name: "【漫画】派对浪客诸葛孔明 第13话",
          imgUrl: "img/v5.jpg",
          author: "唯今er",
          hot: "100",
          url: "",
          duration: "3:12"
        },
        {
          name: "【漫画】地球侵略少女Asuka 第1话",
          imgUrl: "img/v6.jpg",
          author: "空山雀眠",
          hot: "20",
          url: "",
          duration: "12:30"
        },
        {
          name: "【沙雕福利】快乐每一天",
          imgUrl: "img/v7.jpg",
          author: "不正经老四",
          hot: "500",
          url: "",
          duration: "20:00"
        },
        {
          name: "【独家·鬼畜有你】快乐崇拜",
          imgUrl: "img/v8.jpg",
          author: "两颗大白兔呀",
          hot: "920",
          url: "",
          duration: "21:10"
        },
        {
          name: "那些有趣傻缺碉堡小视频第二百四十二期",
          imgUrl: "img/v9.jpg",
          author: "周同学",
          hot: "555",
          url: "",
          duration: "35:01"
        },
        {
          name: "【今天有什么好笑的 #88】牛顿欣慰的笑了",
          imgUrl: "img/v0.jpg",
          author: "Tony老师",
          hot: "2",
          url: "",
          duration: "10:59"
        }
      ],
      audioList: [
        {
          name: "寒蝉凄切",
          singer: "柳永",
          album: "雨霖铃",
          duration: "02:22",
          hot: 20
        },
        {
          name: "后来遇见他",
          singer: "胡66",
          album: "",
          duration: "04:09",
          hot: 54
        },
        {
          name: "少年行",
          singer: "张艺兴",
          album: "《梦幻西游》手游张艺兴代言推广曲",
          duration: "03:14",
          hot: 11
        }
      ],
      navFixed: "",
      curScrollTop: 0,
      eleTop: 0,
      sectionMarTop_current: 0,
      sectionMarTop_default: 30,
      sectionMarTop_fixed: 30
    };
  },
  components: {
    Carousel,
    Navbar,
    VideoList,
    AudioList
  },
  created() {
    const _this = this;
    window.addEventListener("scroll", function() {
      _this.homeScroll(this.scrollY)
    })
  },
  mounted() {
    let navEle = document.querySelector("#nav");
    this.eleTop = navEle.getBoundingClientRect().top;
    let eleHeight = navEle.getBoundingClientRect().height;
    this.sectionMarTop_fixed = this.sectionMarTop_default + eleHeight;
    this.sectionMarTop_current = this.sectionMarTop_default;
  },
  methods: {
    homeScroll(scrollY) {
      if (scrollY >= this.eleTop) {
        this.sectionMarTop_current = this.sectionMarTop_fixed;
        this.navFixed = "navFixed";
      } else if (scrollY < this.eleTop) {
        this.navFixed = "";
        this.sectionMarTop_current = this.sectionMarTop_default;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.home {
  height: 100vh;

  .carousel {
    height: 300px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .navbar {
    width: 100%;
    position: relative;
  }

  .navFixed {
    position: fixed;
    top: 0;
    z-index: 999;
  }

  .section {

    .mar-tp {
      margin-top: 38px;
    }
  }
}
</style>